<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet icon" type="text/css" href="${pageContext.request.contextPath}/admin/images/favicon.ico">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/three_common.css">
    <script src="js/three_common.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花礼网</title>
    <style>
        .active{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 导航条start -->
    <%@include file="header.jsp"%>
    <!-- 导航条end -->

    <!-- 面包屑start -->
    <div class="container bread">
        <div class="col-sm-12">            
            <a href="index.jsp"  target="_blank">首页</a> &nbsp;&nbsp;
            &gt;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/getGoodsListByTn?tn=${goods.typeName}"  target="_blank">${goods.typeName}</a>&nbsp;&nbsp;
            &gt;&nbsp;&nbsp;
            <span>${goods.name}</span>
        </div>
    </div>
    <!-- 面包屑end --> 

    <!-- 商品详情start -->
    <div class="container">
<%--    主内容--%>
        <div class="form-group">
            <!-- 左边商品图片 -->
            <div class="phonebox1 col-xs-12 col-sm-12 col-lg-5">
                <div class="all" id='all'>
                    <!-- 小图片 主图片+遮罩-->
                    <div class="imgsmallBox">
                        <img src="image/${goods.picture}" alt="" upimg>
                        <!-- upimg过滤器，有了可以直接锁定，就不用其他选择器写了 -->
                        <div class="mask"></div>
                    </div>
                    <!-- 下面的小图标 -->
                    <div class="imgdown">
                        <c:set var="date">${goods.picture.substring(0,6)}</c:set>
                        <img src="image/${goods.picture}" alt="" rel="image/${goods.picture}" smallimage>
                        <img src="image/${date}/${goods.id}-2.jpg" alt="" rel="image/202106/${goods.id}-2.jpg" smallimage>
                        <img src="image/${date}/${goods.id}-3.jpg" alt="" rel="image/202106/${goods.id}-3.jpg" smallimage>
                        <img src="image/${date}/${goods.id}-4.jpg" alt="" rel="image/202106/${goods.id}-4.jpg" smallimage>
                    </div>
                    <div class="imgbigBox">
                        <img src="image/${goods.picture}" alt="" id="bigImg">
                    </div>
                </div>
                <a  href="${pageContext.request.contextPath}/insertCollectGoods?goodsId=${goods.id}" class="collect" style="margin-top: 100px;display: block;height: 20px;text-decoration: none;cursor: pointer;">
                    <img src="./assets/star.png" alt="" width="20px" height="20px">
                    <span style="line-height: 20px;color: #999;">收藏商品</span>
                </a>
            </div>
            <!-- 右边商品信息 -->
            <div class="col-xs-12 col-sm-12 col-lg-6">
                <div class="rightbox" >
                    <div class="right-one">${goods.name}</div>
                    <div class="right-two">${goods.intro}</div>
                    <div class="right-three">
                        <div class="right-three-row1">
                            <span class="row1-span">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                            <span>${goods.price}</span>
                        </div>
                        <div class="right-three-row2">
                            <span class="row1-span">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                            <div class="right-three-row2-span">
                                <div style="min-height: 30px;">
                                    <em class="tag">配送说明</em>
                                    <span class="tagdown">限送100多个主要城市的市区及近郊：</span>
                                </div>
                                <div style="min-height: 30px;">
                                    <em class="tag">分期免息</em>
                                    <span class="tagdown">银联、花呗、掌上生活、工行分期支付可享免息</span>
                                </div>
                                <div style="min-height: 30px;">
                                    <em class="tag">赠送积分</em>
                                    <span class="tagdown">购买即赠商城积分，积分可抵现~</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-four">
                        <span class="row1-span">服务说明</span>
                        <div class="" style="line-height:35px;">
                            <span style="color: #ca141d;">现货</span>
                            <span>，今天21:59前付款，预计12月18日（明天）送达</span>
                        </div>
                    </div>
                    <div class="right-five">
                        <span class="row1-span">商品编码</span>
                        <div style="line-height: 35px;">202106${goods.id}</div>
                    </div>
                    <div class="right-six">
                        <span class="row1-span">选择套餐</span>
                        <div class="span1">
                            <label><input type="radio" name="test12" checked="checked" style="display: none;" /><span style="width: 100px;">图片套餐</span></label>
                        </div>
                    </div>
                    <div class="">
                        <span class="row1-span">购买服务</span>
                        <div class="product-buttonmain">
                            <!-- 商品简介-按钮-start -->
                            <div id="pro-operation" class="product-button clearfix" style="visibility: visible;">
                                <a class="product-button01" href="${pageContext.request.contextPath}/addCart?gid=${goods.id}&price=${goods.price}"><span>加入购物车</span></a>
                                <a class="product-button02" href="${pageContext.request.contextPath}/getDirectOrder?id=${goods.id}&price=${goods.price}&name=${goods.name}"><span>立即下单</span></a>
                            </div>
                            <!-- 商品简介-按钮-end -->
                        </div>
                
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 商品详情end -->

    <!-- 页脚start -->
    <%@include file="footer.jsp"%>
    <!-- 页脚end -->
</body>
    <script>

        <%--$(function (){--%>
        <%--    $('#boxcall').click(function (){--%>
        <%--        &lt;%&ndash;$.ajax({&ndash;%&gt;--%>
        <%--        &lt;%&ndash;    url:"${pageContext.request.contextPath}/insertCollectGoods?goodsId=${goods.id}",&ndash;%&gt;--%>
        <%--        &lt;%&ndash;    Method:"get",&ndash;%&gt;--%>
        <%--        &lt;%&ndash;    success:function (result) {&ndash;%&gt;--%>
        <%--        &lt;%&ndash;        console.log("result"+result);&ndash;%&gt;--%>
        <%--        &lt;%&ndash;        // 已经收藏&ndash;%&gt;--%>
        <%--        &lt;%&ndash;        if (result==0){&ndash;%&gt;--%>
        <%--        &lt;%&ndash;            s='<img src="./assets/success.png" alt="" style="width: 30px;height: 30px;">' +&ndash;%&gt;--%>
        <%--        &lt;%&ndash;                '<span style="line-height: 30px;font-weight: bold;font-size: 15px;">成功加入收藏夹！</span>' +&ndash;%&gt;--%>
        <%--        &lt;%&ndash;                '<p style="margin-left: 35px;">您可以<a href="" style="text-decoration: none;color: #1a75a3;">查看收藏夹</a></p>'&ndash;%&gt;--%>
        <%--        &lt;%&ndash;            $('#collect_main').html(s);&ndash;%&gt;--%>
        <%--        &lt;%&ndash;        }else {&ndash;%&gt;--%>
        <%--        &lt;%&ndash;            s='<img src="./assets/warning.png" alt="" style="width: 30px;height: 30px;">' +&ndash;%&gt;--%>
        <%--        &lt;%&ndash;                '<span style="line-height: 30px;font-weight: bold;font-size: 15px;">已收藏过此商品！去试试其他的吧</span>' +&ndash;%&gt;--%>
        <%--        &lt;%&ndash;                '<p style="margin-left: 35px;">您可以<a href="" style="text-decoration: none;color: #1a75a3;">查看收藏夹</a></p>'&ndash;%&gt;--%>
        <%--        &lt;%&ndash;            $('#collect_main').html(s);&ndash;%&gt;--%>
        <%--        &lt;%&ndash;        }&ndash;%&gt;--%>
        <%--        &lt;%&ndash;    }&ndash;%&gt;--%>
        <%--        &lt;%&ndash;})&ndash;%&gt;--%>
        <%--        // $('#blockbox').removeClass('active')--%>
        <%--    })--%>
        <%--})--%>
    </script>
</html>